<template>
  <div id="todo" class="card">
    <div class="inline-container">
      <div class="inline-item"><h1>Todo</h1></div>
      <div class="inline-item buttons">
        <el-button size="small" @click="() => (addToDoVisible = true)">
          添加
        </el-button>
        <el-button size="small" type="danger" @click="deleteMethod">
          删除
        </el-button>
      </div>
    </div>

    <div id="tableBackground">
      <el-table
        v-model:data="todoData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="30" />
        <el-table-column prop="id" label="ID" v-if="invisible" />
        <el-table-column prop="event" label="任务" />
        <el-table-column prop="endDate" label="截止日期" width="105">
          <template #default="scope">
            <div v-if="isToday(scope.row.endDate)" style="color: brown;">{{ scope.row.endDate }}</div>
            <div v-if="!isToday(scope.row.endDate)">{{ scope.row.endDate }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <!--编辑会议弹窗（务必关闭时销毁元素）-->
  <el-dialog
    title="添加代办信息"
    v-model="addToDoVisible"
    width="60vw"
    @closed="reload"
    destroy-on-close
  >
    <AddToDo :userId="userId" />
  </el-dialog>
</template>

<script>
import axios from "axios";
import { baseUrl } from "@/main";
import { show_success_msg, show_error_msg } from "@/js/msg";
import AddToDo from "./addToDo.vue";

export default {
  components: {
    AddToDo,
  },

  data() {
    return {
      baseUrl: baseUrl,
      todoData: [],
      userId: localStorage.getItem("userId"),
      addToDoVisible: false,
      selections: [],
      id: "",
    };
  },
  methods: {
    getToDo() {
      axios
        .get(this.baseUrl + "/Todo/findByUserId?userId=" + this.userId)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.todoData = re_data.data;
          } else if (re_data.status == 500) {
            show_error_msg("获取待办失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("获取待办失败", "无法与服务建立连接");
        });
    },

    deleteMethod() {
      for (var i = 0, len = this.selections.length; i < len; i++) {
        this.id = this.selections[i];
        this.deleteToDo();
      }
    },

    deleteToDo() {
      let fromdata = new FormData();
      fromdata.append("id", this.id);
      axios
        .post(this.baseUrl + "/Todo/deleteById", fromdata)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.getToDo();
          } else {
            show_error_msg("删除失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("删除失败", "与服务器通讯异常");
        });
    },

    handleSelectionChange(val) {
      var list = [];
      for (var i = 0, len = val.length; i < len; i++) {
        if (list.includes(val[i].id) == true) {
          list = list.filter((item) => item !== val[i].id);
        } else {
          list.push(val[i].id);
        }
      }
      this.selections = list;
    },

    reload() {
      this.getToDo();
    },

    isToday(dateStr){ 
      return new Date().toISOString().split("T")[0] === dateStr
    }
  },

  mounted() {
    this.getToDo();
  },
};
</script>

<style scoped>
.inline-container {
  width: 100%; /* 可以根据需要设置宽度 */
}

.inline-item {
  display: inline-block; /* 或者使用 display: inline-block; */
}

.buttons {
  width: 78%;
  height: 4vh;
  align-items: right;
  /* background-color: aquamarine; */
}

.buttons > .el-button {
  float: right;
  margin-left: 10px;
  margin-top: 1.5vh;
  width: 25%;
  height: 70%;
  font-size: 80% !important;
}

h1 {
  font-size: 3vh;
  width: 20%;
}

#todo {
  height: 51vh;
  width: 20vw;
  padding: 20px;
  margin-top: 8px;
  margin-left: 3px;
}

#todo > #tableBackground {
  margin-top: 17px;
  background-color: rgba(255, 255, 255, 0.534);
  height: 83%;
  border-radius: 5px;
  overflow: auto;
  box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.07);
}

.el-table {
  border-radius: 5px;
}
</style>